import React, { Component, Suspense } from 'react';
import { connect } from 'dva';
import { Layout, Menu, Breadcrumb, Carousel, Row, Col, Icon, List, Typography } from 'antd';
import Slider from "react-slick";
// import Ellipsis from 'ant-design-pro/lib/Ellipsis';
// import 'ant-design-pro/dist/ant-design-pro.css';
import ListItem from '@/components/ListItem'
import ActivitySliderItem from '@/components/ActivitySliderItem'
import styles from './index.less';


const data = [
  <ListItem data='NEOMA商学院介绍'/>,
  <ListItem data='诺欧商学院坐落地---法国鲁昂市'/>,
  <ListItem data='诺欧商学院由来'/>,
];


class ActivitySlider extends Component {
  state = {
    sliderDataList: [
    ]
  };

  static getDerivedStateFromProps(nextProps, prevState) {
    if (prevState.sliderDataList.length === 0) {
      return {
        sliderDataList: nextProps.data
      }
    }
    else{
      return prevState
    }

  }

  componentDidMount() {
  }

  componentWillUnmount() {
  }

  onChange = (a, b, c) => {
    // console.log(a, b, c);
  }

  next = () => {
    this.slider.slickNext();
  }
  previous = () => {
    this.slider.slickPrev();
  }

  onActivitySliderItemOver = (index) => {
    // console.log('onActivitySliderItemOver');
    this.setState(prevState => {
      const newSliderDataList = prevState.sliderDataList.map((item, i) => i == index ? { ...item, isDetail: true } : { ...item, isDetail: false });
      return {
        ...prevState,
        sliderDataList: newSliderDataList
      }
    })
  }

  onActivitySliderItemOut = () => {
    // console.log('onActivitySliderItemOut')
    this.setState(prevState => {
      const newSliderDataList = prevState.sliderDataList.map((item, i) => ({ ...item, isDetail: false }));
      return {
        ...prevState,
        sliderDataList: newSliderDataList
      }
    })
  }

  render() {
    const { settings } = this.props;
    const { sliderDataList } = this.state;
    // console.log('sliderDataList: ', sliderDataList);
    return (
      <div>
        <Row>
          <Col span={3} style={{}}>
            <Icon
              className={styles.leftArrow}
              type="left-circle"
              onClick={this.previous}
              style={{display: sliderDataList.length>4 ? 'block' : 'none', marginRight: 10}}
            />
          </Col>
          <Col span={18}>
            <Row gutter={16} >
              {/*<Slider*/}
                {/*{ ...settings }*/}
                {/*className={styles.slider}*/}
                {/*ref={c => (this.slider = c)}*/}
              {/*>*/}
              <div className={styles.slider}>
                  {sliderDataList.map((item, index) => (
                    <Col span={6}>
                      <ActivitySliderItem
                        dataItem={item}
                        // imgSrc={item.imgSrc}
                        // footer={item.footer}
                        key={index}
                        onMouseEnter={() => this.onActivitySliderItemOver(index)}
                        onMouseLeave={() => this.onActivitySliderItemOut(index)}
                      />
                    </Col>
                  ))}
              </div>
              {/*</Slider>*/}
            </Row>
          </Col>
          <Col span={3}>
            <Icon
              className={styles.rightArrow}
              // style={{float: 'left', left: '20px', lineHeight: '143px', cursor: 'pointer'}}
              type="right-circle"
              onClick={this.next}
              style={{display: sliderDataList.length>4 ? 'block' : 'none', marginLeft: 10}}
            />
          </Col>
        </Row>
      </div>
    );
  }
}

export default ActivitySlider;
